<page-header> </page-header>
<nz-card [nzBordered]="false">
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
    <div nz-col nzMd="8" nzSm="24" class="grid-border">
      <nz-card [nzBordered]="false">
        <form nz-form [nzLayout]="'inline'" (ngSubmit)="onGroupSearch()" class="search__form">
          <div nz-col nzMd="16" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
                  name="groupName" placeholder="" id="groupName" />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
            <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
              'mxk.text.query' | i18n
              }}</button>
          </div>
        </form>
      </nz-card>
      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
        [nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
        [nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
        (nzQueryParams)="onGroupQueryParamsChange($event)">
        <thead>
          <tr>
            <th></th>
            <th nzAlign="center" style="display: none">Id</th>
            <th nzAlign="center">{{ 'mxk.groups.name' | i18n }}</th>
            <th nzAlign="center">{{ 'mxk.groups.category' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of groupQuery.results.rows">
            <td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
            <td nzAlign="left" style="display: none">
              <span>{{ data.id }}</span>
            </td>
            <td nzAlign="left"> {{ data.groupName }}</td>
            <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.groups.category.dynamic' | i18n }}</td>
            <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.groups.category.static' | i18n }}</td>
            <td nzAlign="center" *ngIf="data.category == 'app'"> {{ 'mxk.groups.category.app' | i18n }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div nz-col nzMd="16" nzSm="24" class="grid-border">
      <nz-card [nzBordered]="false">
        <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
          <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
            <div nz-col nzMd="8" nzSm="24">
              <nz-form-item>
                <nz-form-label nzFor="groupName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
                <input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
                  disabled placeholder="" />
              </nz-form-item>
            </div>
            <div nz-col nzMd="8" nzSm="24">
              <nz-form-item>
                <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
                <nz-form-control>
                  <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }"
                    name="username" placeholder="" id="username" />
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
                | i18n }}</button>
              <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
              <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
            </div>
          </div>
        </form>
      </nz-card>
      <nz-card [nzBordered]="false">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col [nzSpan]="24" class="table-list-toolbar">
            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
              }}</button>
            <button nz-button type="button" nz-popconfirm
              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()"
              [nzType]="'primary'" nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
          </div>

          <div nz-col nzMd="24" nzSm="24">
            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
              (nzQueryParams)="onQueryParamsChange($event)">
              <thead>
                <tr>
                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
                    (nzCheckedChange)="onTableAllChecked($event)"></th>
                  <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
                  <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of query.results.rows">
                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
                  <td nzAlign="left"> {{ data.groupName }}</td>
                  <td nzAlign="left"> {{ data.username }}</td>
                  <td nzAlign="left"> {{ data.displayName }}</td>
                  <td nzAlign="left"> {{ data.department }}</td>
                  <td nzAlign="left"> {{ data.jobTitle }}</td>
                  <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) :
                    ('mxk.users.gender.male' | i18n) }}</td>
                  <td nzAlign="center" nzBreakWord="false">
                    <div nz-col>
                      <button *ngIf="data.category == 'static'" nz-button type="button" nz-popconfirm
                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
                        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)"
                        nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
      </nz-card>
    </div>
  </div>
</nz-card>